<template>
    <div class="container container-announcement">
        <div class="page-top">
            <a-carousel autoplay arrows draggable>
                <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                    <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                </div>
                <div class="index-bgbox" v-for="item in bannerList">
                    <img class="page-top-bg" :src="item" />

                </div>
            </a-carousel>
            <div class="page-top-panel">
                <div class="page-top-title">成果交易</div>
                <div class="top-input-box">
                    <input class="top-input" v-model="keywords" type="text" placeholder="输入您想查找的成果…" @keyup.enter="resetList">
                    <a-icon class="top-input-ico" type="search" @click="resetList" />
                </div>
            </div>
        </div>
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-content">
                <div class="page-main">
                    <div class="content-left">
                        <!-- <div class="search-list" :class="pageParams.type===1&&'search-sel'">全部</div> -->
                        <div class="search-list" :class="pageParams.type==='CGZH'&&'search-sel'"
                            @click="pageParamsTypeChange('CGZH')">
                            <div>成都中医药大学</div>
                            <div>专利转让信息公示</div>
                        </div>
                        <div class="search-list" :class="pageParams.type==='KJR'&&'search-sel'"
                            @click="pageParamsTypeChange('KJR')">
                            <div>成果转化现金奖励</div>
                            <div>信息公示</div>
                        </div>
                        <div class="search-list" :class="pageParams.type==='GXR'&&'search-sel'"
                            @click="pageParamsTypeChange('GXR')">
                            <div>成果转化重要贡献人</div>
                            <div>奖励信息公示</div>
                        </div>
                    </div>
                    <div class="content-right">
                        <template v-if="pageList.length>0">
                            <div class="page-list" v-for="item in pageList" @click="jumpDetail(item.id)">
                                <!-- <div class="page-list-imgbox">
                            <img class="page-list-img" :src="require('@/assets/img/test.png')" />
                        </div> -->

                                <div class="list-parent">
                                    <div class="list-title" v-if="pageParams.type==='CGZH'">
                                        成都中医药大学技术转让信息公示（{{item.year}}第{{item.number}}号）</div>
                                    <div class="list-title" v-else-if="pageParams.type==='KJR'">
                                        科技人员取得职务科技成果转化现金奖励信息公示（{{item.year}}第{{item.number}}号）</div>
                                    <div class="list-title" v-else-if="pageParams.type==='GXR'">
                                        成都中医药大学对我校科技成果转化重要贡献人进行奖励的公示（{{item.year}}第{{item.number}}号）</div>
                                    <div class="list-info">
                                        {{splitContent(item.achievementName)}}
                                    </div>
                                </div>
                                <a-button class="list-btn" type="primary">查看公示</a-button>
                            </div>
                        </template>

                        <div class="page-list" style="justify-content: center;" v-else>
                            <div class="list-null">
                                <div class="iconfont">&#xe642;</div>
                                <div>暂无数据</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div style="text-align:right;margin-top:30px">
                    <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange" />
                </div>

            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { UserModule } from "@/store/modules/userModules";
import { getStorageUserInfo } from "@/utils";
import { Vue, Component } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    pageNum = 1;
    total = 20;
    pageParams = {
        type: "CGZH",
    };
    pageList = [];
    loading = false;
    pageSize = 10;
    keywords = "";
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getAnnList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                name: this.keywords,
                publicityType:this.pageParams.type
            });
            this.pageList = res.data?.rows || [];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    jumpDetail(id: string) {
        // 如果没登录 提示登录
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true);
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }
        this.$router.push({ name: "announcementDetail", query: { publicityType: this.pageParams.type, pageId: id } });
    }
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }

    async mounted() {
        await this.getBanner();
        this.getList();
    }

    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }
    pageParamsTypeChange(key: string) {
        this.pageParams.type = key;
        this.resetList();
    }
    bannerList = [""];
    async getBanner() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getBannerList({
                pageTable: "成果公示banner",
            });

            const rows = res.data?.rows || [];
            const pictures = rows[0]?.pictures || "";
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            this.loading = false;
        }
    }
}
</script>

<style lang="scss">
.container-announcement {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 140px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        border-radius: 0 100px 100px 0;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1250px;
    }

    .page-main {
        display: flex;
        background-color: #fff;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 20px;
    }
    .content-left {
        border: solid 1px #eee;
        padding: 10px;
        width: 250px;
        font-size: 18px;
        color: #333;
        margin-right: 10px;
    }
    .content-right {
        flex-grow: 1;
    }
    .search-list {
        text-align: center;
        margin-bottom: 20px;
        padding: 10px 0;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
    }
    .search-list:hover {
        background-color: #2f65f3;
        color: #fff;
    }
    .search-sel {
        background: #2f65f3;
        color: #fff;
    }
    .page-list {
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 0;
    }
    .page-list::after {
        content: "";
        border-bottom: solid 1px #eee;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        right: 0px;
    }
    .page-list-imgbox {
        width: 240px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .page-list-img {
        max-width: 100%;
        max-height: 100%;
    }
    .list-parent {
        flex-grow: 1;
        width: 100px;
        padding: 0 15px;
    }
    .list-btn {
        flex-shrink: 0;
    }
    .list-title {
        font-weight: bold;
        font-size: 18px;
        color: #333333;
    }
    .list-info {
        font-size: 14px;
        color: #505050;
        margin-top: 5px;
    }
}
</style>
